<template>
  <div class="recovery-pwd">
    <div>
      <Header>找回密码</Header>
      <div class="login-main">
        <div class="login-tel">
          <input
            type="password"
            v-model="userPwd"
            placeholder="请输入新的密码"
          />
        </div>
        <div class="login-pwd">
          <input
            type="password"
            v-model="userPwdConfirm"
            placeholder="请确认密码"
          />
        </div>
        <div class="login-btn" @click="save">确定</div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/views/login/components/Header.vue";
import { Toast } from "mint-ui";

export default {
  name: "RecoveryPwd",
  data() {
    return {
      userPwd: "",
      userPwdConfirm: "",
      rules: {
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空，并且为6-12位",
        },
        userPwdConfirm: {
          rule: /^\w{6,12}$/,
          msg: "确认密码不能为空，并且为6-12位",
        },
      },
    };
  },
  components: {
    Header,
  },
  methods: {
    async save() {
      //前端验证
      if (!this.validate("userPwd")) return;
      if (!this.validate("userPwdConfirm")) return;
      if (this.userPwd != this.userPwdConfirm) {
        Toast("两次密码不一致");
        return;
      }

      //后端验证
      let res = await this.$http.changePwd({
        tel: this.$route.params.tel,
        pwd: this.userPwd,
      });
      if (res.code == 200) {
        Toast("密码修改成功");        
        //跳转 密码登录 页面
        this.$router.replace("/pwdlogin");
        //或者直接登录
        //......
      } else {
        Toast(res.data);
      }
    },
    validate(key) {
      let flag = true;
      if (!this.rules[key].rule.test(this[key])) {
        flag = false;
        Toast(this.rules[key].msg);
      }
      return flag;
    },
  },
};
</script>

<style lang="scss" scoped>
.recovery-pwd {
  .login-main {
    padding: 0.5333rem;

    .login-tel,
    .login-pwd {
      width: 100%;
      height: 1.1733rem;

      input {
        outline: none;
        border: none;
        height: 100%;
        width: 100%;
        font-size: 0.4267rem;
        padding-left: 0.2667rem;
      }
    }

    .login-btn {
      background-color: #b0352f;
      width: 100%;
      height: 1.1733rem;
      color: #fff;
      text-align: center;
      line-height: 1.1733rem;
      font-size: 0.4267rem;
      border-radius: 0.08rem;
    }
  }
  .login-main > div {
    margin-bottom: 0.5333rem;
  }
}
</style>